<form name="deployConfigForm" [formGroup]="deployConfigForm" (ngSubmit)="submitForm()">
  <div class="modal-body">
    <div class="container">
      <div class="form-group row">
        <label class="col-form-label col-sm-3" for="deployJob">Deployment Application <span class="required-text"> *</span></label>
        <div class="col-md-9">
          <input id="deployJob" type="search" class="form-control"
                 [class.is-invalid]="((configForm.deployJob.dirty || configForm.deployJob.touched) && configForm.deployJob.errors) || searchFailed"
                 formControlName="deployJob"
                 [ngbTypeahead]="typeAheadResults"
                 [inputFormatter]="getDeployJob"
                 [resultFormatter]="getDeployJob"
                 placeholder="Search for a deployment application" />
          <span *ngIf="searching">searching...</span>
          <div class="invalid-feedback" *ngIf="!searchFailed || configForm.deployJob.value === ''">Please provide a deploy job.</div>
          <div class="invalid-feedback" *ngIf="searchFailed && !searching && configForm.deployJob.value !== ''">Sorry, suggestions could not be loaded.</div>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-sm-3">Ignore Environment Failures Pattern</label>
        <div class="col-sm-9">
          <div class="input-group mb-3">
            <input id="deployRegex" type="text" class="form-control" placeholder="Enter Regex" aria-label="deployRegex"
                   formControlName="deployRegex" >
          </div>
        </div>
      </div>
      <div class="form-group checkbox">
        <label title="If true deployments with the same name and ID that processed in different servers will grouped together">
          <input id = "deployAggregateServer" type="checkbox" name="deployAggregateServer" ng-model="deployConfig.deployAggregateServer" ng-change="reload()" formControlName="deployAggregateServer">
          Aggregate Servers
        </label>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="container">
      <div class="row">
        <div class="col text-center">
          <button class="btn btn-primary" [disabled]="!deployConfigForm.valid">
            Save
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
